/**
 * Created by tanbingqin on 2020/6/18.
 */
import React from 'react'
import { connect } from 'react-redux'
import { Button, Checkbox, Switch, Icon, Spin, Select, InputNumber, Input, Radio, Modal, Row, Col, TimePicker, message } from 'antd'
import baseService from 'share/base.service'
import { messages } from 'share/common'
import moment from 'moment';
import processUtil from 'containers/setting/expense-type/new-expense-type/expense-type-travel/process-util'
import expenseTypeTravelService from 'containers/setting/expense-type/new-expense-type/expense-type-travel/expense-type-travel.service'
import errorMessage from 'share/errorMessage'

class CarConfigItem extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      config: []
    };
  }

  componentDidMount() {
    console.log('hhhhhhhhhhhhhh');
    console.log(this.props.widget);

    const { widget } = this.props;
    this.initConfig(widget);
  }

  initConfig = (widget) => {
    let config = processUtil.getCarConfigBase();

    if (!widget.fieldConstraint) {
      return;
    }

    let fieldConstraint = JSON.parse(widget.fieldConstraint);
    config.forEach(item => {
      if (fieldConstraint.typeList && fieldConstraint.typeList.indexOf(item.key) > -1) {
        item.value = true;
      }
      item.subConfigList.forEach(subItem => {
        if (fieldConstraint[item.key][subItem.key]) {
          subItem.show = fieldConstraint[item.key][subItem.key].show;
          subItem.required = fieldConstraint[item.key][subItem.key].required;
        }
      });
    });
    this.setState({config});
  };

  handleChangeMain = (value, key) => {
    let { config } = this.state;
    config.forEach(item => {
      if (item.key === key) {
        item.value = value;
      }
    });
    this.setState({config}, this.processConfig);
  };

  /**
   *
   * @param value checkbox值
   * @param key 用车类型key
   * @param subKey 用车类型下的子配置的key
   * @param valueKey 修改哪个value字段
   */
  handleChangeSub = (value, key, subKey, valueKey) => {
    let { config } = this.state;
    config.forEach(item => {
      if (item.key === key) {
        item.subConfigList.forEach(subItem => {
          if (subItem.key === subKey) {
            subItem[valueKey] = value;
          }
        });
      }
    });
    this.setState({config}, this.processConfig);
  };

  processConfig = () => {
    const { onChange } = this.props;
    const { config } = this.state;

    let fieldConstraint = {};
    let typeList = [];
    config.forEach(item => {
      if (item.value) {
        typeList.push(item.key);
      }
      fieldConstraint[item.key] = {};
      item.subConfigList.forEach(subItem => {
        fieldConstraint[item.key][subItem.key] = {};
        fieldConstraint[item.key][subItem.key].show = subItem.show;
        fieldConstraint[item.key][subItem.key].required = subItem.required;
      });
    });
    fieldConstraint.typeList = typeList;
    onChange(fieldConstraint);
  };

  render() {
    const { config } = this.state;
    return (
      <div style={{lineHeight: '30px'}}>
        {config && config.map(configItem => {
          return (
            <div style={{marginBottom: '12px'}} key={configItem.key}>
              <Checkbox
                checked={configItem.value}
                disabled={!configItem.editable}
                onChange={e => this.handleChangeMain(e.target.checked, configItem.key)}
              >
                {configItem.name}
              </Checkbox>
              {configItem.subConfigList && configItem.subConfigList.map(subConfigItem => {
                return (
                  <div style={{paddingLeft: '24px'}} key={subConfigItem.key}>
                    <span style={{display: 'inline-block', width: '120px'}}>{subConfigItem.name}</span>
                    <Checkbox
                      checked={subConfigItem.show}
                      disabled={!subConfigItem.showEditable}
                      onChange={e => this.handleChangeSub(e.target.checked, configItem.key, subConfigItem.key, 'show')}
                      style={{marginRight: '20px'}}
                    >
                      {messages('expense-6.key233')/*启用temp*/}
                    </Checkbox>
                    <Checkbox
                      checked={subConfigItem.required}
                      disabled={!subConfigItem.requiredEditable}
                      onChange={e => this.handleChangeSub(e.target.checked, configItem.key, subConfigItem.key, 'required')}
                    >
                      {messages('expense-6.key168')/*必填*/}
                    </Checkbox>
                  </div>
                )
              })}
            </div>
          )
        })}
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {}
}

CarConfigItem.propTypes = {
  widget: React.PropTypes.object,  //控件对象
  onChange: React.PropTypes.func,  //更改属性时的回调
};

CarConfigItem.defaultProps = {
  widget: {},
  onChange: () => {},
};

export default connect(mapStateToProps)(CarConfigItem)
